<template>
	<view class="list">
		<view class="item-box" v-for="(item,index) in list" :key="index" @click="newsDetails(item)">
			<view class="item-img-box">
				<image class="item-img" mode="widthFix" :src="path+item.avatar"></image>
			</view>
			<view class="box-text">
				<view class="title1">{{item.name}}</view>
				<view class="title2">
					<text>{{item.info}}</text>
					<text v-if="item.distance<=1000">{{item.distance.toFixed(1)}} m</text>
					<text v-if="item.distance>1000">{{(item.distance/1000).toFixed(2)}} km</text>
				</view>
				<view class="title3">
					<text v-for="(ite,j) in item.productEntityList[0].tagList" :key="j">安全健康</text>
				</view>
				<view class="title4">
					<view class="title4-item-box" v-for="(itt,i) in item.productEntityList" :key="i" @click.stop="toGoodsdetails(itt)">
						<image class="item-img1" :src="path+itt.logo"></image>
						<view class="title4-1">{{itt.name}}</view>
						<view class="title4-2">
							<text>￥</text>
							{{((itt.price||0)/100).toFixed(2)}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: [null, null, null, null]
			}
		},
		data() {
			return {
				path: this.$http.tpUrl + '/', // 图片前缀
			};
		},
		created() {

		},
		methods: {
			//详情
			newsDetails(item) {
				uni.navigateTo({
					url: '/pages_category_page1/catering/merchant?id=' + item.id
				})
			},
			//商品详情
			toGoodsdetails(item) {
				let paramsStr=`?ProductEntityId=${item.productEntityId}`
				console.log(paramsStr)
				uni.navigateTo({
					url: `/pages_category_page1/goods/goodsDetails${paramsStr}`
				})
			},
		}
	}
</script>

<style scoped>
	.item-box {
		background: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(93, 69, 41, 0.25);
		/* display: flex; */
		padding: 28rpx 20rpx;
		margin-bottom: 20rpx;
		padding-left: 198rpx;
		position: relative;
		min-height: 180rpx;
	}
	.item-img-box {
		width: 178rpx;
		/* height: 178rpx; */
		/* flex-shrink: 0; */
		/* display: inline-block; */
		position: absolute;
		left: 20rpx;
		top: 28rpx;
	}
	.item-box .item-img {
		width: 178rpx;
		height: 178rpx;
		/* flex-shrink: 0; */
		background-color: #ededed;
		border-radius: 10rpx;
	}

	.item-box .box-text {
		/* flex: 1; */
		padding-left: 20rpx;
	}

	.title1 {
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #5d4529;
	}

	.title2 {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;
		position: relative;
		margin-top: 14rpx;
	}

	.title2 text:last-child {
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -12rpx;
	}

	.title3 {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #fdab34;
		margin-top: 30rpx;
	}

	.title3 text {
		padding: 4rpx 18rpx;
		display: inline-block;
		background: #fff0db;
		border-radius: 10rpx;
		margin-right: 10rpx;
	}

	.title3 text:last-child {
		margin-right: 0;
	}

	.title4 {
		margin-top: 28rpx;
	}

	.title4 .title4-item-box {
		width: 178rpx;
		margin-right: 30rpx;
		display: inline-block;
	}

	.title4 .title4-item-box .item-img1 {
		width: 178rpx;
		height: 178rpx;
		background-color: #ededed;
		border-radius: 10rpx;
	}

	.title4 .title4-item-box .title4-1 {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #5d4529;
		margin-top: 14rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.title4 .title4-item-box .title4-2 {
		margin-top: 10rpx;
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #f61111;
	}

	.title4 .title4-item-box .title4-2 text {
		font-size: 24rpx;
	}
</style>